<template>
  <view class="message-body">
    <view class="message-picker">
      <picker-view
        indicator-style="height: 45px; width:45px; background-color: transparent;"
        mask-class="clearColor"
        class="picker-style"
        :value="timeIndex"
        @change="changeElec"
        mask-style="background:transparent"
      >
        <picker-view-column>
          <view
            class="picker4"
            :class="{ active: index === timeIndex[0] }"
            v-for="(item, index) in startTimeHour"
            :key="index"
            style="line-height: 45px; height: 45px"
          >
            {{ item }}
          </view>
        </picker-view-column>
        <view class="messages-tips">:</view>

        <picker-view-column>
          <view
            class="picker4"
            :class="{ active: index === timeIndex[1] }"
            v-for="(item, index) in startTimeMin"
            :key="index"
            style="line-height: 45px; height: 45px"
          >
            {{ item }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
    <view class="text-tips"></view>
    <view class="message-picker">
      <picker-view
        indicator-style="height: 45px;"
        mask-style="background:transparent"
        indicator-class="clearBorder"
        class="picker-style"
        :value="timeIndex2"
        @change="changeElec2"
      >
        <picker-view-column>
          <view
            class="picker4"
            :class="{ active: index === timeIndex2[0] }"
            v-for="(item, index) in endTimeHour"
            :key="index"
            style="line-height: 45px; height: 45px"
          >
            {{ item }}
          </view>
        </picker-view-column>
        <view class="messages-tips">:</view>
        <picker-view-column>
          <view
            class="picker4"
            :class="{ active: index === timeIndex2[1] }"
            v-for="(item, index) in endTimeMin"
            :key="index"
            style="line-height: 45px; height: 45px"
          >
            {{ item }}
          </view>
        </picker-view-column>
      </picker-view>
      <view class="ends-text" v-if="showEndText">次日</view>
      <view class="ends-text" v-else></view>
    </view>
  </view>
</template>
<script setup lang="ts">
import type { SleepTime } from '@/controller/RefrigeratorB/definition'

const props = defineProps<{
  show: boolean
  startTimeHour: string[]
  startTimeMin: string[]
  endTimeHour: string[]
  endTimeMin: string[]
  isCurrentDate: number[]
}>()
const emit = defineEmits<{
  (e: 'timechange', data: SleepTime): void
  (e: 'isPicking'): void
}>()
watch(
  () => props.show,
  () => {
    if (props.show) {
      if (props.isCurrentDate.length > 0) {
        nextTick(() => {
          timeIndex.value[0] = props.isCurrentDate[0]
          timeIndex.value[1] = props.isCurrentDate[1]
          timeIndex2.value[0] = props.isCurrentDate[2]
          timeIndex2.value[1] = props.isCurrentDate[3]
        })
      } else {
        initSetting()
      }
    }
  }
)

const showEndText = ref(false)

const timeIndex = ref([0, 0])
const timeIndex2 = ref([0, 0])
function isShowEndText() {
  if (timeIndex.value[0] > timeIndex2.value[0]) {
    return true
  } else if (timeIndex.value[0] === timeIndex2.value[0]) {
    if (timeIndex.value[1] > timeIndex2.value[1]) {
      return true
    }
  } else {
    return false
  }
}
function changeElec(e: WechatMiniprogram.PickerViewChange) {
  timeIndex.value = e.detail.value
  switchChange()
}
function changeElec2(e: WechatMiniprogram.PickerViewChange) {
  timeIndex2.value = e.detail.value

  switchChange()
}
function switchChange() {
  let startHour = props.startTimeHour[timeIndex.value[0]]
  let startMin = props.startTimeMin[timeIndex.value[1]]
  let endHour = props.endTimeHour[timeIndex2.value[0]]
  let endMin = props.endTimeMin[timeIndex2.value[1]]
  emit('timechange', {
    startHour,
    startMin,
    endHour,
    endMin,
  })
}
function initSetting() {
  let newTimeIndex = [20, 0]
  let endiTimeIndex = [8, 0]
  nextTick(() => {
    timeIndex.value = newTimeIndex
    timeIndex2.value = endiTimeIndex
  })
}
watch(
  () => timeIndex.value,
  () => {
    if (isShowEndText()) {
      showEndText.value = true
    } else {
      showEndText.value = false
    }
  }
)
watch(
  () => timeIndex2.value,
  () => {
    if (isShowEndText()) {
      showEndText.value = true
    } else {
      showEndText.value = false
    }
  }
)
</script>
<style lang="less" scoped>
.message-body {
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 24rpx;
  .message-picker {
    display: flex;
    position: relative;
    width: 100%;
    height: 216rpx;
    text-align: center;
    z-index: 9;
    box-sizing: border-box;
    justify-content: center;
    .clearColor {
      background-color: #009;
    }
    .picker-style {
      width: 66%;
      height: 216rpx;
      text-align: center;
      font-size: 40rpx;
      color: #131b35;
      line-height: 45px;
      background-color: transparent;
      .picker4 {
        font-size: 36rpx;
        width: auto;
        color: var(--primary-petrol, #2d3746);
        font-weight: 400;
      }
    }
    /deep/ .picker-style::before {
      content: '';
      position: absolute;
      top: 0px;
      border: none;
    }
    /deep/ .picker-style::after {
      content: '';
      position: absolute;
      bottom: 0;
      border: none;
    }
  }
  .active {
    font-weight: 500;
    font-size: 24px !important;
    color: var(--primary-color) !important;
  }
  .messages-tips {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    margin: 0 32rpx;
  }
  .text-tips {
    width: 70rpx;
    height: 4rpx;
    background-color: rgba(64, 141, 242, 1);
    margin-left: -24rpx;
  }
  .ends-text {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    font-size: 22rpx;
    padding-top: 9rpx;
    margin-left: 24rpx;
    width: 24px;
  }
  .clearBorder {
    width: 45px;
    height: 45px;
    background-color: #000 !important;
  }
}
</style>
